<template>
  <view class="semicircle-button">
    <view
      class="strategy-btn"
      @tap="handleTap"
    >
      {{ text }}<image
        :lazy-load="true"
        :src="strategy_btn_right"
      />
    </view>
  </view>
</template>

<script>
import { strategy_btn_right } from "@/libs/image-url";
export default {
  name: "SemicircleButton",
  props: {
    text: {
      type: String,
      default: "总榜"
    },
    handleTap: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      strategy_btn_right
    };
  }
};
</script>

<style lang="scss">
.semicircle-button {
  height: 50px;
  .strategy-btn {
    float: right;
    // width: 120px;
    padding: 0 18px 0 24px;
    height: 50px;
    padding-left: 24px;
    background: #ffad1c;
    border: 2px solid #a13d0f;
    border-right: none;
    opacity: 1;
    border-radius: 100px 0px 0px 100px;
    font-size: 28px;
    line-height: 45px;
    color: #ffffff;
    image {
      width: 10.18px;
      height: 17.46px;
      margin-left: 12px;
      vertical-align: unset;
    }
  }
}
</style>
